﻿<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./style/bootstrap.min.css">
    <link rel="stylesheet" href="./style/main.css">
    <style type="text/css">
        #dragarea-filetypes { color: rgb(153,153,153); font-size: 12px; margin: 5px 0px; }
        h1 { color: rgb(0,149,255); font-size: 2rem; font-weight: lighter; margin: 0px 0px 15px; }
        #dragarea { min-width: 600px; height: 10rem; line-height: 140px; font-size: 2rem; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-box-align: center; align-items: center; padding-left: 100px; color: rgba(0,0,0,0.2); cursor: default; background-color: rgba(0,149,255,0.2); }
        #dragarea button { height: 50px; font-size: 18px; line-height: 50px; margin-left: 10px; padding: 0px 20px; }
        .btn:not(:disabled):not(.disabled) { cursor: pointer; }
        button.vigorous { box-shadow: rgba(156,156,156,0.5) 0px 2px 4px 0px; text-shadow: rgba(0,0,0,0.2) 0px -1px 0px; }
        .vigorous { cursor: pointer; background-color: rgb(0,149,255); display: inline-block; line-height: 36px; height: 36px; letter-spacing: 1px; -webkit-appearance: button; white-space: nowrap; vertical-align: middle; color: rgb(255,255,255); border-radius: 2px; border-width: initial; border-style: none; border-color: initial; border-image: initial; padding: 0px 15px; overflow: hidden; }
        .btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; user-select: none; font-size: 1rem; line-height: 1.5; border-width: 1px; border-style: solid; border-color: transparent; border-image: initial; padding: 0.375rem 0.75rem; border-radius: 0.25rem; transition: color 0.15s ease-in-out 0s,background-color 0.15s ease-in-out 0s,border-color 0.15s ease-in-out 0s,box-shadow 0.15s ease-in-out 0s; }
        pre { display: inline-block; padding: 10px 50px 10px 15px; border-radius: 2px; margin: 5px 0; font-size: .7rem; color: #183691; background-color: #fdfaeb; border: 1px solid #fbf4d0; min-width: 560px; font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace }
        pre .c_comment { color: #8e908c }
        pre .c_htmltag { color: #0366d6; font-size: .9rem }
        pre .c_htmlpropname { color: #795da3 }
        pre .c_htmlpropvalue { color: #183691 }
        pre .c_jsfunc { color: #909; font-weight: 700 }
        pre .c_jsstring { color: #0095ff }
        pre .c_cssblock { font-size: .9rem; font-weight: 700 }
        pre .c_csspropname { color: #a00 }
        pre .c_csspropvalue { color: #0095ff }
        .img { border: 1px solid #dedede; border-radius: 3px; padding: 3px; }
        .img img { max-width: 100%; }
    </style>
    <title>tool</title>
</head>

<body>
    <div class="container">
        <a class="btn btn-link" href='/'>&lt; 返回</a>
        <h1>文件转 Base64</h1>
        <div id="dragarea-filetypes">支持 PNG、GIF、JPG、SVG、PSD、BMP、ICO、TTF、WOFF、EOT 等格式</div>

        <div id="dragarea">
            <span>拖动文件到此区域</span> <button class="btn vigorous">或点此选择文件</button><span>放开鼠标开始转码</span>
            <input type="file" style="display: none" id="file">
        </div>
        <div class="rows header codes">
            <textarea class="form-control" id="code" rows="10" placeholder="结果"></textarea>
            <div class="copyresult"></div>
        </div>
        <div class="rows action" style="margin-top:5px">
            <button class="btn btn-success" id="toimage">base64转图片</button>
        </div>
        <div class="rows header img" style="display: none">
            <img src="" id="img" style="display: none" />
        </div>
        <div>
<pre>
<span class="c_comment">// Base64 在CSS中的使用</span>
<span class="c_cssselector">.box{</span>
<span class="c_csspropname">background-image: url("</span><span class="pre-propvalue">...</span><span class="c_csspropname">");</span>
<span class="c_cssselector">}</span>
<span class="c_comment">// Base64 在HTML中的使用</span>
<span class="c_htmltag">&lt;img <span class="c_htmlpropname">src="</span><span class="c_htmlpropvalue">...</span><span class="c_htmlpropname">"</span> /&gt;</span>
</pre>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="./scripts/jquery.slim.min.js"></script>
    <script>
        $(function () {
            $('.vigorous').on('click', function () {
                // 模拟input点击事件
                var evt = new MouseEvent("click", {
                    bubbles: false,
                    cancelable: true,
                    view: window
                });
                $('#file')[0].dispatchEvent(evt);
            });
            $('#file').on('change', function () {
                if (!this.files) return
                console.log(Date.now())
                loading($('.codes'), true)
                let file = this.files[0]
                var reader = new FileReader();
                reader.addEventListener("load", function () {
                    var base64 = reader.result;
                    console.log(Date.now())
                    loading($('.codes'), false)
                    console.log(Date.now())
                    //$('#code').val(base64);
                    document.getElementById('code').value = base64
                }, false);

                if (this) {
                    reader.readAsDataURL(file);
                }
            });
            $('#toimage').on('click', function () {
                var code = $('#code').val();
                if (code.indexOf('data:') == -1) {
                    code = "data:image/png;base64," + code
                }
                var tmpImg = new Image();
                tmpImg.onload = function () {
                    $(".img").show();
                    $('#img').attr('src', code).show();
                }
                tmpImg.src = code

            });
            var tips = function (msg) {
                $('.copyresult').show().text(msg).addClass('active');
                var t = setTimeout(() => {
                    $('.copyresult').removeClass('active');
                    clearTimeout(t);
                    setTimeout(() => {
                        $('.copyresult').hide('active');
                    }, 500)
                }, 1500);
            };
            var loading = (container, isloading) => {
                if (isloading)
                    container.append('<div class="loading"><div class="text">LOADING...</div></div>')
                else
                    container.find('.loading').remove()
            };
            $('#code').on('dblclick ', function () {
                if (this.value.replace(/(^\s*)|(\s*$)/gi, '') == '') return
                this.select();
                var textArea = document.createElement("textarea");
                textArea.setAttribute("style", "position:fiexd;top:0;left:0;witdh:0;height:0;border:none;display:none");
                textArea.value = $('#coderesult').val();
                document.body.appendChild(textArea);
                textArea.select();
                try {
                    var successful = document.execCommand('copy');
                    var msg = successful ? '成功复制到剪贴板' : '该浏览器不支持点击复制到剪贴板';
                    //alert(msg);
                    tips(msg)
                } catch (err) {
                    tips('该浏览器不支持点击复制到剪贴板')
                }
                document.body.removeChild(textArea);
            });
        });
    </script>
</body>

</html>